<script lang="ts" setup>
import { reactive, ref } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import type { FormInstance, FormRules } from "element-plus"
import { type ItemBannerList } from "@/api/wallpaper/types/banner.ts"
import { fetchTypeList } from "@/api/wallpaper/index.ts"
import { Edit, Delete } from "@element-plus/icons-vue"
import Dialog from "./components/Dialog.vue"
import { formatDateTime } from "@/utils/index"
import { usePagination } from "@/hooks/usePagination"
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const dialogVisible = ref<boolean>(false)
const dialogTitle = ref<string>("新增")
const editData = ref<ItemBannerList>({})
const handleAdd = () => {
  dialogVisible.value = true
  dialogTitle.value = "新增"
  editData.value = {}
}

const handleEdit = (index: number, row: ItemBannerList) => {
  dialogVisible.value = true
  dialogTitle.value = "编辑"
  editData.value = row
}
const handleDelete = (index: number, row: ItemBannerList) => {
  ElMessageBox.confirm(`删除后无法恢复，确认删除吗？`, "操作确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // delBanner({ row.id }).then((res) => {
    //   ElMessage({
    //     type: "success",
    //     message: "操作成功"
    //   })
    //   getList()
    // })
  })
}
const closeDialog = () => {
  dialogVisible.value = false
  editData.value = {}
}
const tableData = ref<ItemBannerList[]>([])
const getTableData = async () => {
  const res = await fetchTypeList({
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize
  })
  tableData.value = res.data || []
  paginationData.total = res.total
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, {
  immediate: true
})
</script>

<template>
  <div class="app-container">
    <el-button type="primary" class="mrg-b-20" @click="handleAdd">新增分类</el-button>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column label="缩略图" align="center" width="150">
        <template #default="scope"
          ><img :src="scope.row.picurl" style="width: 40px; height: 60px; border-radius: 5px" alt=""
        /></template>
      </el-table-column>
      <el-table-column label="排序" align="center" prop="sort" width="80" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="是否推荐" align="center" prop="enable">
        <template #default="scope">
          {{ scope.row.enable ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center" prop="select">
        <template #default="scope">
          {{ scope.row.select ? "是" : "否" }}
        </template>
      </el-table-column>

      <el-table-column label="发布时间" align="center" prop="createTime">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) || "--" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200 " align="center">
        <template #default="scope">
          <el-button size="small" :icon="Edit" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
          <el-button size="small" :icon="Delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :currentPage="paginationData.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <!-- 新增/编辑弹窗 -->
    <Dialog :dialogVisible="dialogVisible" :dialogTitle="dialogTitle" @closeDialog="closeDialog" :editData="editData" />
  </div>
</template>

<style lang="scss" scoped></style>
